<template>
    <el-dialog :show-close="false" :visible.sync="auth_visible" custom-class="login" width="32%">
        <div class="main position-relative">
            <div v-show="step==1 || step==2">
                <el-image :src="auth_bg" fit="cover" style="width: 100%;"></el-image>
                <div class="bg-white" style="margin-top:-10px" v-if="step==1">
                    <div class="font-38 text-center color-pink weight-bold pt-20">请先完成实名认证</div>
                    <div class="color-999 text-center font-18 mt-10">方便您使用更多特权服务</div>

                    <div class="mt-80">
                        <el-button @click="makeAuth" class="login-button" round>立即认证</el-button>
                    </div>
                </div>
                <div style="padding-left:20%;padding-right:20%" v-else>
                    <el-form :model="form" :rules="rules" ref="ruleForm">
                        <div class="mobile-input">
                            <el-form-item prop="cert_name">
                                <el-input placeholder="请输入真实姓名" v-model="form.cert_name"></el-input>
                            </el-form-item>
                            <el-form-item prop="cert_no">
                                <el-input placeholder="请输入身份号码" v-model="form.cert_no"></el-input>
                            </el-form-item>
                        </div>
                    </el-form>
                    <div class="mt-30">
                        <el-button :loading="loading" @click="getAuth" class="auth-button" round>保存</el-button>
                    </div>
                </div>
            </div>
            <div class="flex align-center jus-center flex-dre-column qrcode pt-50" v-if="step==3">
                <div v-loading="loading" class="cursor-pointer" @click="getAuth">
                    <vue-qrcode :options="{ width: 600 }" :value="certify_url" id="qrcode" style="margin:0 auto ;"></vue-qrcode>
                </div>
                <div class="color-999 font-18">手机扫码实名认证</div>
                <div class="mt-10">
                    <el-button @click="checkAuth" class="login-button" round style="width: 200px;margin-left: 0;">验证结果</el-button>
                </div>
            </div>
            <i @click="auth_visible=false" class="el-icon el-icon-close close-action"></i>
        </div>
    </el-dialog>
</template>

<script>
import { Base64 } from 'js-base64'
import VueQrcode from '@chenfengyuan/vue-qrcode'
export default {
    components: {
        VueQrcode,
    },
    computed: {
        auth_visible: {
            get() {
                return this.$store.state.system.auth_visible
            },
            set(val) {
                return (this.$store.state.system.auth_visible = val)
            },
        },
    },
    data() {
        return {
            step: 1,
            auth_bg: require('@/assets/image/auth-bg.png'),
            form: {
                cert_name: null,
                cert_no: null,
            },
            rules: {
                cert_name: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
                cert_no: [{ required: true, message: '请输入身份号码', trigger: 'blur' }],
            },
            loading: false,
            certify_url: '',
        }
    },
    mounted() {
        this.form.meta_info = Base64.encode(JSON.stringify(window.getMetaInfo()))
    },
    methods: {
        makeAuth() {
            this.step = 2
        },
        getAuth() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.loading = true
                    this.$request
                        .post('/alibaba/web_auth', this.form)
                        .then((res) => {
                            this.certify_url = res.certify_url
                            this.form.certify_id = res.certify_id
                            this.$nextTick(() => {
                                this.step = 3
                                // this.checkStatus()
                            })
                        })
                        .catch((error) => {})
                        .finally((res) => {
                            this.loading = false
                        })
                }
            })
        },
        checkAuth() {
            this.$request
                .post('/alibaba/authentication', this.form)
                .then((res) => {
                    this.$message.success('认证成功')
                    this.auth_visible = false
                })
                .catch((error) => {})
        },
        // checkStatus() {
        //     let that = this
        //     const timer = setInterval(() => {
        //         that.$request
        //             .get('/alibaba/verify_status')
        //             .then((res) => {
        //                 if (res.status == 1) {
        //                     clearInterval(timer)
        //                 }
        //             })
        //             .catch((error) => {})
        //     }, 1000)
        // },
    },
}
</script>

<style lang="scss" scoped>
.main {
    height: 30vw;
    background: #fff;
    border-radius: 15px;
}
/deep/.el-dialog__body {
    padding: 0;
}
/deep/.el-dialog__header {
    padding: 0;
}
/deep/.el-dialog {
    background: transparent;
    box-shadow: none;
}
/deep/.login-button {
    background: #ff1c6d !important;
    color: #fff !important;
    width: 60%;
    margin-left: 20%;
}
/deep/.auth-button {
    background: #ff1c6d !important;
    color: #fff !important;
    width: 100%;
}
.close-action {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 25px;
    cursor: pointer;
}
.qrcode canvas {
    width: 20vw !important;
    height: 20vw !important;
}
</style>